<template>
	<view class="createRepairRequestForm_box box">
		<view class="createRepairRequestForm_container">
			<view class="createRepairRequestForm_type">
				<view class="">
					选择分类
				</view>
				<view class="createRepairRequestForm_type_right">
					<u-picker :show="show" :columns="listType" keyName="name" @change='choseType'
						@confirm='closeChoseType' @close='closeChoseType' @cancel='closeChoseType'></u-picker>
					<text @click="show = true">选择分类 ></text>
				</view>

			</view>
			<view class="">
				{{isChoseType}}
			</view>
			<!-- <view class="createRepairRequestForm_desc">
				<view class="createRepairRequestForm_desc_title">
					选择报修内容
				</view>
				<view class="createRepairRequestForm_desc_right">
					<u-action-sheet :actions="listDesc" :title="descTitle" :show="showDesc" @close="close"
						@select="choseDesc"></u-action-sheet>
					<text @click="showDesc = true">选择报修内容 ></text>
				</view>
			</view> -->
			<view class="createRepairRequestForm_desc_detail">
				<view class="createRepairRequestForm_desc_detail_title">
					报修内容
				</view>
				<textarea name="" id="" cols="30" rows="10" placeholder="请输入报修内容" auto-height
					v-model="repairContent"></textarea>
			</view>
			<view class="uploadImg">
				<view class="uploadImg_title">
					图片上传
				</view>
				<view class="">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
				</view>
			</view>
		</view>
		<view class="sureBtn">
			<view class="" @click="addSRRecordMethod">
				<u-icon name="checkmark-circle" color="#fff"></u-icon>
				创建维修订单
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listSchoolRepairsClassDropdown,
		addSRRecord,
	} from "../../api/request.js"
	import MiniProgramApi from "../../api/index.js"
	export default {
		data() {
			return {
				title: '选择分类',
				descTitle: "选择报修内容",
				listType: [],
				listDesc: [],
				show: false,
				showDesc: false,
				fileList1: [],
				choseTypeId: null,
				token: null,
				openId: null,
				repairContent: null,
				isChoseType: "",
				fileList: null,
				dormitoryId: null,
				userInfoId: null,
				fileList: []
			};
		},
		onLoad() {
			const that = this
			this.listSchoolRepairsClassDropdownMethod()
			uni.getStorage({
				key: "token",
				success(res) {
					that.token = res.data
				}
			})
			uni.getStorage({
				key: "openId",
				success(res) {
					that.openId = res.data
				}
			})
			uni.getStorage({
				key: "dormitoryId",
				success(res) {
					that.dormitoryId = res.data
				}
			})
			uni.getStorage({
				key: "userInfoId",
				success(res) {
					that.userInfoId = res.data
				}
			})
			console.log(MiniProgramApi, 'MiniProgramApiMiniProgramApi');
		},
		methods: {
			async addSRRecordMethod() {

				const now = new Date();
				// 获取年、月、日、小时和分钟
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 补零
				const day = String(now.getDate()).padStart(2, '0'); // 补零
				const hours = String(now.getHours()).padStart(2, '0'); // 补零
				const minutes = String(now.getMinutes()).padStart(2, '0'); // 补零
				const seconds = String(now.getSeconds()).padStart(2, '0'); // 补零

				// 使用字符串拼接构建所需格式
				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				let fileArr = this.fileList.join(',')
				console.log(this.repairContent, this.isChoseType, this.userInfoId, this.dormitoryId, this.status, this
					.repairsId, this.fileList, fileArr);
				let reult = await addSRRecord({
					status: 1,
					schoolUserId: this.userInfoId,
					repairsTime: formattedDate,
					dormitoryId: this.dormitoryId,
					repairsId: this.repairsId,
					repairsInfo: this.repairContent,
					fileList: fileArr
				})
				uni.showToast({
					title: reult.msg
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			},
			closeChoseType() {
				this.show = false
			},
			choseType(e) {
				console.log(e);
				const {
					id,
					name,
					pid
				} = e.value[0]
				this.choseTypeId = id
				this.repairsId = id
				this.isChoseType = name
				this.show = true
			},
			async listSchoolRepairsClassDropdownMethod() {
				let result = await listSchoolRepairsClassDropdown()
				this.listType = [result.data]
			},
			close() {
				console.log('close');
				this.show = false
				this.showDesc = false
			},
			choseDesc(e) {
				console.log(e, 'choseDesc');
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result);
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				const that = this

				console.log(MiniProgramApi, 'MiniProgramApi');
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: MiniProgramApi.uploadFile, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							Authorization: that.token,
							openId: that.openId
						},
						success: (res) => {
							setTimeout(() => {
								console.log(res.data, 'res.data');
								that.fileList.push(JSON.parse(res.data).fileName)
								resolve(JSON.parse(res.data))
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.createRepairRequestForm_container {
		width: 90%;
		margin: auto;

		.createRepairRequestForm_type {
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;

			.createRepairRequestForm_type_right {
				color: rgba(166, 166, 166, 1);
			}
		}

		.createRepairRequestForm_desc {
			display: flex;
			justify-content: space-between;

			.createRepairRequestForm_desc_title {}

			.createRepairRequestForm_desc_right {
				color: rgba(166, 166, 166, 1);
			}
		}

		.createRepairRequestForm_desc_detail {
			margin-top: 40rpx;
			background: white;

			.createRepairRequestForm_desc_detail_title {
				margin: 20rpx 0 0 20rpx;
				color: rgba(166, 166, 166, 1);
			}
		}

		.uploadImg {
			margin-top: 40rpx;
			background: white;
			padding: 20rpx;

			.uploadImg_title {
				margin-bottom: 20rpx;
				color: rgba(166, 166, 166, 1);
			}
		}
	}

	textarea {
		margin: auto;
		padding: 20rpx;
		min-height: 180rpx;
	}

	.sureBtn {
		width: 90%;
		margin: auto;
		margin-top: 40rpx;

		>view {
			display: flex;
			justify-content: center;
		}
	}
</style>